<template>
  <component :is="getWidgetName(data.type)" :data="data"></component>
</template>

<script setup lang="ts">
  import { reactive, ref, watch, onMounted, toRefs,defineAsyncComponent  } from 'vue'
  import formWidget from './formWidget.vue'
  import searchWidget from './searchWidget.vue'
  import tableWidget from './tableWidget.vue'
  import tableTreeWidget from './tableTreeWidget.vue'
  import toolBarWidget from './toolBarWidget.vue'
  toolBarWidget.vue
  
  const parentData = defineProps({
      data:{
          type: String,
          name: String
      }
  });

  const compMap={
    form: formWidget,
    search: searchWidget,
    table: tableWidget,
    tableTree: tableTreeWidget,
    toolBar: toolBarWidget,
  };
  
  function getWidgetName(dataType){
     return compMap[dataType];
  }
</script>

<style lang="scss" scoped>
</style>